<template>
  <div class="page">
    <div class="selectData search">
      <span style="margin-left:20px;margin-right:6px;font-size:14px;">责任单位:</span>
      <el-cascader
        class="userIntSize"
        v-model="dutyId"
        :options="deptTypeList"
        size="small"
        :props="departmentProp"
        :show-all-levels="false"
        @change="changeFamily1"
        ref="targetref"
      ></el-cascader>
      <!-- <el-select
        v-model="quarter"
         size="small"
        clearable
        placeholder="请选择"
      ></el-select>-->
    </div>
    <div id="YmyThreeleft"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dutyId: [1, 7], //责任id
      deptTypeList: [],
      departmentProp: {
        label: "name",
        value: "id",
        children: "departments",
      },
    };
  },
  mounted() {
    this.dataAnalysis();
    this.taskNumber(7);
    this.getdepartmentTypeList();
  },
  methods: {
    changeFamily1(val) {
      this.dutyId = val;
      console.log(this.dutyId);
      let _val = JSON.parse(JSON.stringify(val));
      console.log(_val);
      if (_val) {
        _val = _val.pop();
        this.taskNumber(_val);
      }
    },
    // 获取所有目标任务数量
    taskNumber(val) {
      this.$axios
        .post("/deptTask/getDeptTaskNum", { deptId: val })
        .then((res) => {
          console.log(res, 999888);
          let _data = res.data;
          let _nameArr = [];
          let _numberArr = [];
          _data.forEach((item, index) => {
            _nameArr.push(item.taskName);
            _numberArr.push(item.taskNum);
          });

          this.dataAnalysis(_nameArr, _numberArr);
        })
        .catch((err) => {});
    },
    // 部门类型
    getdepartmentTypeList() {
      this.$axios
        .post("/dept/getDepartmentTypeList")
        .then((res) => {
          if (res.code == 200) {
            console.log(res.data);
            res.data.splice(4, 1);
            let arr = res.data;
            let x = 3,
              y = 4;
            arr.splice(x - 1, 1, ...arr.splice(y - 1, 1, arr[x - 1]));
            this.deptTypeList = arr;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 各区县得分排名分析展示
    dataAnalysis(nameArr, numberArr) {
      var YmyThree3 = this.$echarts.init(
        document.getElementById("YmyThreeleft")
      );
      YmyThree3.setOption({
        grid: {
          left: "10%",
          bottom: "30%",
        },
        title: {
          text: "",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          position: function(pt) {
            return [pt[0], "10%"];
          }
        },
        xAxis: {
          type: "category",
          data: nameArr,
          axisLabel: {
            // formatter: function (value) {
            //   return value.split("").join("\n");
            // },
            interval: 0,
            rotate: 60,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: numberArr,
            type: "bar",
            // showBackground: true,
            barWidth: 30,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            itemStyle: {
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function (params) {
                  var colorList = [
                    "#c52b6a",
                    "#ec4290",
                    "#ea3acf",
                    "#d539f7",
                    "#a82ada",
                    "#8114c0",
                    "#d8bd26",
                    "#b8ca23",
                    "#76a905",
                    "#80c13d",
                    "#4da758",
                    "#4aa4a5",
                    "#2a65b1",
                  ];
                  return colorList[params.dataIndex];
                },
              },
              //鼠标悬停时：
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  > .search {
    width: 100%;
    height: 40px;
  }
  > #YmyThreeleft {
    width: 100%;
    height: 500px;
  }
}
.selectData {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
